<template>
    <view class="content">
        <image class="limit-bg" src="https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20210111/3ceaffc0-53d7-11eb-a1ab-b3bc001f3743.png"></image>
		<scroll-view
                scroll-x="true"
                class="scroll-x"
                :scroll-with-animation="true"
                :scroll-left="scrollLeft"
				:class="[{ sticky : isShowSticky}]"
        >
            <view class="limit-list">
                <view class="limit-item" v-for="(item, index) in tabList" :key="index" @tap="tabChangeCustom(index)">
                    <view class="limit-time" :class="index === active ? 'active' : ''">{{
                        item.time
                        }}</view>
                    <view class="limit-type" v-if="item.status === 0">
                        即将开始
                    </view>
                    <view class="limit-type active" v-if="item.status === 1">
                        疯抢中
                    </view>
                    <view class="limit-type" v-if="item.status === 2">
                        已结束
                    </view>
                </view>
            </view>
        </scroll-view>
        <view class="goods-rules">
            <view class="rules-tips">活动仅当天有效，先下单后补贴</view>
            <view class="rules-btn" @tap="$refs.rulesPopup.open()">抢购规则</view>
        </view>
        <view class="goods-list" @touchstart="touchStart" @touchend="touchEnd">
            <limit-item
                v-for="(item, index) in tabList[active].list"
                :item="item"
                :key="item.gid"
                @onCopySuccess="onCopySuccess"
                @onErrMessage="onErrMessage"
            ></limit-item>

            <!-- 商品骨架 -->
            <template v-for="i in ['a', 'b', 'c', 'd']">
                <view class="skeleton-wrap" v-if="
					tabList[active].list.length === 0 &&
					!tabList[active].finished &&
					!tabList[active].empty">
                    <skeleton class="goods-skeleton" :loading="true" avatarShape="square" :row="4" avatarSize="254rpx"></skeleton>
                </view>
            </template>
        </view>
        <!-- 加载中插件 -->
        <view class="load-status">
            <load-more status="loading" color="#c6c6c6" iconType="circle" v-if="!tabList[active].finished && !tabList[active].empty"
                       :contentText="contentText"></load-more>
            <load-more status="noMore" color="#c6c6c6" v-if="tabList[active].finished" :contentText="contentText"></load-more>
            <empty v-if="tabList[active].empty"></empty>
        </view>
        <!-- 回到顶部 -->
        <view class="scrollTop" :class="[{ show: isShowScrollTop }]" @tap="backTop">
            <text class="iconfont icon-huidaodingbu"></text>
        </view>
		
		<!-- 限时抢购规则 -->
		<popup ref="rulesPopup" @touchmove.stop.prevent>
			<view class="rules-popup">
				<text class="iconfont icon-guanbi" @tap="$refs.rulesPopup.close()"></text>
				<view class="rules-title">
					<view class="text">抢购规则</view>
					<view class="line"></view>
				</view>
				<view class="rules-content" @touchmove.stop.prevent>
					<text class="text" v-for="item in shareTemplate" :class="[{ bottom: item === '' }]">{{ item }}</text>
				</view>
			</view>
		</popup>
		<!-- 错误提示弹窗 -->
		<popup ref="msgPopup" @touchmove.stop.prevent>
			<view class="msg-popup">
				<text class="iconfont icon-guanbi" @tap="$refs.msgPopup.close()"></text>
				<view class="title">提示</view>
				<view class="err-message">{{ message }}</view>
				<view class="btn" @click="$refs.msgPopup.close()">我知道了</view>
			</view>
		</popup>
		<image class="go-my" @tap="toRecord" src="https://onecode-zfx-one.oss-cn-shenzhen.aliyuncs.com/20210112/4ea99710-54ab-11eb-af84-01c3cf23d810.png"></image>
    </view>
</template>

<script>
    import Empty from "@/components/Empty";
    import Skeleton from '@/components/uni/Skeleton';
    import LimitItem from "@/components/LimitItem";
    import LoadMore from "@/components/uni/LoadMore";
	import Popup from '@/components/uni/Popup';
    import loader from '@/utils/mixin/loader';
    import moment from '@/utils/packges/moment'
    export default {
        name: "list",
        mixins: [loader],
        components: {
            LoadMore,
			Popup,
            Empty,
            Skeleton,
            LimitItem
        },
        data() {
            return {
                list: [],
                current: 0,
                scrollLeft: '',
                ruleTemplate: '',
                hHeight: '',
				startCoor: 0,
				message: '',
				shareTemplate: []
            }
        },
        onLoad() {
            this.initPage();
			
			// 获取限时抢购规则
			this.$service.common.shareTemplate.list({
				type: 10
			}).then(res => {
				this.shareTemplate = res[0].split(' ');
			});
			
			uni.reportAnalytics('enter_xianshiqg', {
				enter_xianshiqg: '进入限时抢购页面'
			});
        },
        onShow() {
            this.$store.dispatch('addVisitRecordUnAuthorized', { pageType : 16 });
        },
        methods: {
            initPage() {
                uni.showLoading({
                    title: '加载中...'
                });
                this.tabList = [];
                this.$service.million.goods
                    .flashTime({
						isBybt: true
					})
                    .then(res => {
                        let index = res.findIndex(e => {
                            return e.status === 1;
                        });
                        if (index !== -1) {
                            this.active = index;
                            setTimeout(() => {
                                this.scrollLeft = (index - 1) * 120;
                            }, 0)
                        }
                        res.forEach((item, index) => {
                            item.index = index;
                            item.loading = false;
                            item.finished = false;
                            item.error = false;
                            item.empty = false;
                            item.page = 1;
                            item.list = [];
                        });
                        this.tabList = this.tabList.concat(res);
                        this.loadMore(this.tabList[this.active]);
                    })
                    .catch(err => {
                        uni.showToast({
                            title: err.message,
                            icon: 'none'
                        });
                    });
            },
            beforeLoader(item) {
                let startTime = '';
                let endTime = '';
                if (item.index === (this.tabList.length - 1)) {
                    startTime = moment().format('YYYY-MM-DD' + ' ' + item.time);
                    endTime = moment().format('YYYY-MM-DD' + ' ' + '24:00');
                } else {
                    let next = this.tabList[this.active + 1];
                    startTime = moment().format('YYYY-MM-DD' + ' ' + item.time);
                    endTime = moment().format('YYYY-MM-DD' + ' ' + next.time);
                }
                this.params.startTime = startTime;
                this.params.endTime = endTime;
                this.params.isBybt = true;
                this.service = this.$service.million.goods.flashGoodsList(this.params);
                return true;
            },
            afterLoader() {
                uni.hideLoading();
            },
			onCopySuccess(tkl, refresh) {
				my.navigateToMiniProgram({
					appId: '2018091261350219',
					path: `/pages/h5pages/h5pages?targetURI=${tkl}`
				});
				
				if (refresh) {
					setTimeout(() => {
						this.onRefresh(this.tabList[this.active]);
					}, 2000)
				}
			},
			onErrMessage(msg) {
				this.message = msg;
				this.$refs.msgPopup.open()
			},
            tabChangeCustom(i) {
                this.scrollLeft = (i - 1) * 120;
                this.tabChange(i);
            },
			touchStart(e) {
				this.startCoor = e.touches[0].pageX;
			},
			touchEnd(e) {
				if (this.startCoor > e.changedTouches[0].pageX) {
					if ((this.startCoor - e.changedTouches[0].pageX) > 150) {
						if (this.active === (this.tabList.length - 1)) {
							this.tabChangeCustom(0);
						} else {
							this.tabChangeCustom(this.active + 1);
						}
					}
				} else {
					if ((e.changedTouches[0].pageX - this.startCoor) > 150) {
						if (this.active === 0) {
							this.tabChangeCustom(this.tabList.length - 1);
						} else {
							this.tabChangeCustom(this.active - 1);
						}
					}
				}
			},
            toRecord() {
                uni.navigateTo({
                    url: '/pages/limit/record'
                });
            }
        },
    }
</script>

<style lang="scss" scoped>
    .content {
        .limit-bg {
            width: 100%;
            height: 424rpx;
            position: fixed;
            top: 0;
            left: 0;
        }
        .scroll-x {
            width: 100%;
            height: 128rpx;
			transition: 0.3s;
			z-index: 1000;
			position: relative;
			&.sticky {
				position: fixed;
				top: 0;
				background: #FD3350;
				z-index: 100;
			}
        }
        .limit-list {
            height: 100%;
            justify-content: space-between;
			@include flexBox(flex-start, center);
            .limit-item {
                text-align: center;
                margin: 0 46rpx;
                .limit-time {
                    color: #febbc4;
                    font-size: 36rpx;
                    margin-bottom: 6rpx;
                    &.active {
                        color: #ffffff;
                    }
                }
                .limit-type {
                    width: 124rpx;
                    margin: auto;
                    color: #febbc4;
                    font-size: 24rpx;
                    text-align: center;
                    &.active {
                        background-color: #ffffff;
                        border-radius: 18rpx;
                        color: #fd3350;
                    }
                }
            }
        }
        .goods-rules {
            width: 100%;
            position: relative;
			margin: 20rpx 0;
			.rules-tips {
			    text-align: center;
			    color: #ffffff;
			    font-size: 24rpx;
			}
			.rules-btn {
				width: 136rpx;
				height: 44rpx;
				background: rgba(0,0,0,0.22);
				border-radius: 22rpx 0rpx 0rpx 22rpx;
				text-align: center;
				line-height: 44rpx;
				color: #fff;
				font-size: 24rpx;
				position: absolute;
				right: 0;
				top: -4rpx;
			}
        }
		.goods-list {
		    padding: 0 20rpx;
		    position: relative;
		}
		.skeleton-wrap {
			background: #fff;
			margin-top: 20rpx;
			border-radius: 16rpx;
		}
		.rules-popup {
			width: 550rpx;
			background: #fff;
			padding: 40rpx 30rpx;
			border-radius: 16rpx;
			position: relative;
			font-size: 24rpx;
			min-height: 300rpx;
			background: linear-gradient(180deg, #F3F9FF 0%, #FFFFFF 100%);
			.icon-guanbi {
				position: absolute;
				right: 10rpx;
				top: 10rpx;
				color: #000;
				font-size: 34rpx;
			}
			.rules-title {
				color: #333333;
				font-size: 36rpx;
				text-align: center;
				font-weight: 600;
				margin-bottom: 20rpx;
				.line {
					background: #439DFF;
					width: 92rpx;
					height: 14rpx;
					border-radius: 50rpx;
					margin: -14rpx auto 0;
				}
			}
			.rules-content {
				font-size: 26rpx;
				max-height: 600rpx;
				overflow: auto;
				@include flexBox(null, null ,column);
				.bottom {
					margin-bottom: 16rpx;
				}
			}
		}
		.msg-popup {
			width: 628rpx;
			border-radius: 16rpx;
			background: #fff;
			padding: 30rpx;
			position: relative;
			box-sizing: border-box;
			@include flexBox(center, center, column)
			.icon-guanbi {
				position: absolute;
				right: 10rpx;
				top: 10rpx;
				color: #fff;
			}
			.title {
				text-align: center;
				color: #000000;
				font-size: 32rpx;
				margin-bottom: 30rpx;
				font-weight: 600;
			}
			.err-message {
				color: #616161;
				font-size: 28rpx;
			}
			.btn {
				width: 240rpx;
				height: 68rpx;
				line-height: 68rpx;
				text-align: center;
				color: #fff;
				background: #FD3350;
				margin: 0 auto;
				margin-top: 50rpx;
				border-radius: 50rpx;
				font-size: 28rpx;
			}
		}
		.go-my {
			width: 90rpx;
			height: 72rpx;
			position: fixed;
			right: 16rpx;
			bottom: 20vh;
		}
    }
</style>